<link rel="import" href="../../bower_components/polymer/polymer-element.html">

<dom-module id="custom-element">
  <template>
    <style>
      :host{
        display: block;
      }
    </style>
    <div>自定义的元素---[[p]]</div>
  </template>

  <script>
    /**
     * @customElement
     * @polymer
     */
    class CustomElement extends Polymer.Element {
      static get is() { return 'custom-element'; }
      static get properties(){
        return {
          p:{
            type: String,
            value:"default value"
          }
        }
      }
      constructor(){
        super();
        console.log("constructor");
      }
      ready(){
        super.ready();
        console.log("ready");
      }
      connectedCallback(){
        super.connectedCallback()
        console.log('connectedCallback');
      }
      disconnectedCallback(){
        super.disconnectedCallback()
        console.log('disconnectedCallback');
      }
      attributeChangedCallback(attributeName, oldValue, newValue, namespace){
        super.attributeChangedCallback(attributeName, oldValue, newValue, namespace)
        console.log('attributeChangedCallback',attributeName,oldValue,newValue,namespace);
      }
      adoptedCallback(oldDocument, newDocument){
        console.log('adoptedCallback',oldDocument,newDocument);
      }
    }
    window.customElements.define(CustomElement.is, CustomElement);

  </script>
</dom-module>


